<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<!-- <template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template> -->
				
				<template>
				<view class="m-header m-b2">
					<view class="top-btn-area">
						<navigator url="/" hover-class="none" class="setting-btn f-s46">
							<image src="@/static/images/setting.png" mode="widthFix"></image>
						</navigator>
					</view>
					<view class="user-area">
						<view class="user-avator">
							<image v-if="userInfo.wx_info" :src="wx_info.avatarUrl" mode="widthFix"></image>
							<image v-else src="@/static/images/man.png" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="user-name-bar"> 
								<text>{{userInfo.realname}}</text> 
							</view>							
							<view class="sub-info">
								<view class="user-lever">{{replace_phone}}</view>
							</view>
						</view>
						<view class="right-menu">
							<navigator url="/package_member/msgList/msgList?type=1" open-type="navigate" hover-class="none" class="menu-btn msg-btn">
								<view class="iconfont f-s44">&#xe6d1;</view>
								<view v-if="msgCount>0" class="num">{{msgCount}}</view>
							</navigator>
						</view>
					</view>
				</view>
				
				<view class="mod-wrap">
					<view class="menu-list">
						<navigator open-type="navigate" url="/package_member/setting/setting" hover-class="none"
							class="item">
							<view class="icon">
								<image src="@/static/images/user_icon.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="name">账户设置</view>
								<view class="iconfont f-s68">&#xeb8a;</view>
							</view>
						</navigator>
						
					</view>
				</view>
				
				<view class="mod-wrap m-b2">
					<view class="menu-list">
						<!-- 我的红包 -->
						<template>
							<!-- 无待领红包 -->
							<!-- <navigator v-if="isHasRedpack==0" url="/package_member/property/list/list" open-type="navigate" hover-class="none" class="item">
								<view class="icon">
									<image src="@/static/images/redpack_icon.png" mode="widthFix"></image>
								</view>
								<view class="content">
									<view class="name">我的红包</view>								
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</navigator> -->
							
							<!-- 有待领红包 -->
							<view class="item" @click="reciveRedPack">
								<view class="icon">
									<image src="@/static/images/redpack_icon.png" mode="widthFix"></image>
								</view>
								<view class="content">
									<view class="name">我的红包</view>
									<view v-if="isHasRedpack>0" class="link f-blue">{{isHasRedpack}}个待领红包</view>
									<!-- <view class="link f-blue"><image class="redpack-loading" src="@/static/images/load_icon.gif" mode="widthFix"></image></view> -->
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</template>
						
						<navigator open-type="navigate" url="/package_member/certificate/certificate?type=1" hover-class="none"
							class="item">
							<view class="icon">
								<image src="@/static/images/certificate_icon.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="name">我的证书</view>
								<view class="iconfont f-s68">&#xeb8a;</view>
							</view>
						</navigator>
						<navigator open-type="navigate" url="/package_shibie/index/index" hover-class="none"
							class="item">
							<view class="icon">
								<image src="@/static/images/camaro_pro.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="name">拍照识别蚁巢</view>
								<view class="iconfont f-s68">&#xeb8a;</view>
							</view>
						</navigator>
						<!-- <navigator open-type="navigate" url="/package_member/area/area" hover-class="none"
							class="item">
							<view class="icon">
								<image :src="web_host+'/wxicon/area_icon.png'" mode="widthFix" style="width: 40rpx;"></image>
							</view>
							<view class="content">
								<view class="name">地区信息</view>
								<view class="iconfont f-s68">&#xeb8a;</view>
							</view>
						</navigator>	 -->	
					</view> 
				</view> 
				
				<!-- 权限菜单 -->
				<template v-if="userAuth">
					<!-- 2 项目管理员 -->
					<template v-if="userAuth.alltype.indexOf(2)!=-1">
						<view class="mod-wrap m-b2">
							<view class="menu-list">								
								<navigator open-type="navigate" url="/package_member/addProject/addProject" hover-class="none"
									class="item">
									<view class="icon">
										<image src="@/static/images/create_pro.png" mode="widthFix"></image>
									</view>
									<view class="content">
										<view class="name">创建项目</view>
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</navigator>
								<navigator open-type="navigate" url="/package_member/memberList/memberList?type=2" hover-class="none"
									class="item">
									<view class="icon">
										<image src="@/static/images/create_c.png" mode="widthFix"></image>
									</view>
									<view class="content">
										<view class="name">添加成员</view>
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</navigator>
								<navigator open-type="navigate" url="/package_member/memberList/memberList?type=1" hover-class="none"
									class="item">
									<view class="icon">
										<image src="@/static/images/user_l.png" mode="widthFix"></image>
									</view>
									<view class="content">
										<view class="name">我的成员</view>
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</navigator>
							</view>	
						</view>
					</template>
						 
				</template> 			

				<view class="mod-wrap">
					<view class="menu-list">
						<view class="item" @click="tellphone">
							<view class="icon">
								<image src="@/static/images/kf_icon.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="name">联系客服</view>
								<view class="iconfont f-s68">&#xeb8a;</view>
							</view>
						</view>
						<!-- <navigator open-type="navigate" url="/package_member/authorization/authorization?type=1" hover-class="none" class="item">
						<view class="icon"><image src="@/static/images/auth_icon.png" mode="widthFix"></image></view>
						<view class="content">
							<view class="name">隐私授权</view>
							<view class="iconfont f-s68">&#xeb8a;</view>
						</view>						
					</navigator> -->
					</view>
				</view>

				<view class="mod-wrap">
					<view class="menu-list">
						<template v-if="isIos">
							<view class="item" @click="updateIos">
								<view class="icon">
									<image src="@/static/images/banben_icon.png" mode="widthFix"></image>
								</view>
								<view class="content">
									<view class="name">版本</view>
									<view class="link">v{{version}}</view>
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</template>
						
						<template v-else>
							<template v-if="isVersionUpdate">
								<view class="item" @click="updateVersion">
									<view class="icon">
										<image src="@/static/images/banben_icon.png" mode="widthFix"></image>
									</view>
									<view class="content">
										<view class="name">版本更新</view>
										<view class="link">v{{version}}<view class="circle"></view></view>
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view>
							</template>
							<template v-else>
								<navigator url="/package_member/updateLog/updateLog" hover-class="none" open-type="navigate" class="item">
									<view class="icon">
										<image src="@/static/images/banben_icon.png" mode="widthFix"></image>
									</view>
									<view class="content">
										<view class="name">版本更新</view>
										<view class="link">v{{version}}</view>
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</navigator>
							</template>
						</template>
						
						<navigator open-type="navigate" :url="'/package_member/about/about?version='+version" hover-class="none"
							class="item">
							<view class="icon">
								<image src="@/static/images/about_icon.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="name">{{app_name}}</view>
								<view class="iconfont f-s68">&#xeb8a;</view>
							</view>
						</navigator>
					</view>
 
				</view>
				</template>

			</view>

			 
		</template>
	</view>
</template>

<script>
	import {
		replaceStr,
		checkPhone
	} from '@/common/util.js'
	import {
		downloadFile,getSystemInfo
	} from '@/common/promise.js'
	import {
		viewHotFixInit 
	} from '@/common/updateModel.js'
	  
	import {
		createdRedPack
	} from '@/common/redPack.js'
	
	import loading from '@/components/loading-more.vue'
	
	export default {
		name: 'demo',
		data() {
			return {
				isIphoneX: true,
				isLogin: false,
				userInfo: {},
				wx_info:{},
				replace_phone: '',
				version: uni.getStorageSync('now_version'), 
				isIos:plus.os.name=="iOS"?true:false,
				app_name: getApp().globalData.app_name, 
				version_update_data:{
					log:'',
					version:'',
					url:''
				},
				web_host:getApp().globalData.web_host,
				userAuth:null,
				msgCount:0,
				isVersionUpdate:false,
				isHasRedpack:0,
				redpackType:'',
				redpackMoney:0,
				redpack_order_id:'',
				loadingState:{
					default:true
				},
			}
		},
		async onShow() {  
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {  
				this.userInfo=await this.getUserInfo();
				if(this.userInfo.wx_info){
					this.wx_info=JSON.parse(this.userInfo.wx_info);
				}				  
				this.replace_phone = replaceStr(this.userInfo.phone, 3, '****'); 
				this.getUserOperationAuth();
				this.checkVersion();
				this.getMsgCount();
			} 
		},
		async onLoad() {  
			
		},
		methods: {
			
			// 获取用户信息
			getUserInfo:async function(){
				let res=await this.$api.user_api.getUserInfo();   
				if(res.data.ret==0){
					this.isHasRedpack=0; 
					this.checkSspRedPack(res.data.data.wx_uuid);
					this.checkRedPacket(res.data.data.wx_open_id);	
					return res.data.data;
				}
			},
			
			// 获取用户权限
			getUserOperationAuth:async function(){
				let res=await this.$api.user_api.getUserInfo({
					ret_type:1
				});   
				if(res.data.ret==0){
					this.userAuth=res.data.data;
				}
			},		 

			// 拨打电话
			tellphone: function() { 
				uni.makePhoneCall({
					phoneNumber: '13560111110',
					success(res) { 
					}
				});
			},
			
			// 回复我的
			getMsgCount:async function(){
				let res=await this.$api.news_api.news({
					act:'myreview_notice', 
					mid:this.userInfo.id, 
				})  
				if(res.data.rcode==1){
					this.msgCount=res.data.rdata.count; 
				} 
			},
			
			// ios 直接打开app store
			updateIos:function(){
				 				
				plus.runtime.launchApplication({
				    action: `itms-apps://itunes.apple.com/cn/app/id6443389527?mt=8`
				}, function(e) {
				    console.log('Open system default browser failed: ' + e.message);
				});
			},
			
			// 更新版本
			updateVersion:async function(){
				let _this=this;
				// 大版本版本更新   弹窗更新提示
				let system = await getSystemInfo(); //  获取系统信息 
				
				if(this.isVersionUpdate){
					viewHotFixInit({
						systemInfo: system,
						log_data: this.version_update_data.remark.split(';'),
						version: this.version_update_data.version,
						versionCode: this.version_update_data.versionCode,
						apk_path: this.version_update_data.file_path
					})
				} 				 
			},

			// 监测版本
			checkVersion:async function() { 
				let res = await this.$api.user_api.getVersion();	 
				if(res.data.rcode==1){
					this.version_update_data=res.data.rdata;
					let reg2 = /[.]/ig; // 匹配全部 '.' =>''
					let new_version = res.data.rdata.version.replace(reg2, "");              //  1.0 =>10  版本格式转数字类型
					let old_version = uni.getStorageSync('now_version').replace(reg2, "");     //  1.0 =>10  版本格式转数字类型
					let new_version_arr = res.data.rdata.version.split('.');                 // 1.0.0 => [1,0,0]  版本转换成数组
					let old_version_arr = uni.getStorageSync('now_version').split('.');           // 1.0.0 => [1,0,0]  版本转换成数组 
					
					if(plus.os.name=="iOS"){
						if(res.data.ios_audit==1 && (Number(new_version)>Number(old_version) || new_version_arr[0] > old_version_arr[0] || new_version_arr[1] >
							old_version_arr[1])){
							this.isVersionUpdate=true;						
						}
					}
					
					if(plus.os.name=="Android"){
						if(Number(new_version)>Number(old_version) || new_version_arr[0] > old_version_arr[0] || new_version_arr[1] >
							old_version_arr[1] ){
							this.isVersionUpdate=true;						
						}
					}
					
				}
				
			},

			showPopup: function(t, n) {
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
			
			// 检测全民防控红包
			checkRedPacket:async function(openid){   
				let res=await this.$api.user_api.checkRedPacket();   
				if(res.data.ret==0){
					if(res.data.data.res){ 
						this.isHasRedpack+=1; 
						this.redpackMoney=res.data.data.money;
						this.redpack_order_id=res.data.data.order_id;
						this.redpackType=1;
						// let system = await getSystemInfo(); //  获取系统信息
						// createdRedPack({
						// 	systemInfo: system,
						// 	openid:this.userInfo.wx_open_id,
						// 	amount:this.redpackMoney,
						// 	type:this.redpackType, // 随手拍
						// 	isUpdateData:1						
						// }) 
					} 					
				}				
			},	
			
			// 检测随手拍红包
			checkSspRedPack:async function(openid){  				
				let res=await this.$api.ssp_api.checkSspRedPack();  
				if(res.data.ret==0){
					if(res.data.data.res){ 
						this.isHasRedpack+=1;
						this.redpackMoney=res.data.data.money;
						this.redpack_order_id=res.data.data.order_id;
						this.redpackType=2;
						// let system = await getSystemInfo(); //  获取系统信息
						// createdRedPack({
						// 	systemInfo: system,
						// 	openid:this.userInfo.wx_uuid,
						// 	amount:this.redpackMoney,
						// 	type:this.redpackType, // 随手拍
						// 	isUpdateData:1						
						// }) 
					} 			
				}				
			},
			
			reciveRedPack:async function(){ 
				if(this.isHasRedpack>=1){
					let system = await getSystemInfo(); //  获取系统信息
					createdRedPack({
						systemInfo: system,
						openid:this.redpackType==1?this.userInfo.wx_open_id:this.userInfo.wx_uuid,
						amount:this.redpackMoney,
						order_id:this.redpack_order_id,
						type:this.redpackType, // 随手拍
						isUpdateData:1						
					}) 
				}else{
					uni.navigateTo({
						url:'/package_member/property/list/list'
					})
				}
 				
			},
 

		},

		components: {
			loading
		},
		
		computed:{
			// 监控红包领取状态
			redpack_state(){
				return this.$store.state.redpack_update;
			}
		},
		
		watch:{
			redpack_state(newer,older){
				if(newer!=older){
					console.log('红包领取状态更新');
					this.getUserInfo();
				}
			}
		}
	}
</script>

<style lang="less">
	.body {
		.m-header {
			font-size: 28rpx;			
		}
	}

	.loading {
		text-align: center;
		padding: 40rpx 0;

		image {
			width: 36rpx;
		}
	}

	.m-header {
		position: relative;
		height: 200rpx;
		background: #f00;

		.user-area {
			position: relative;
			display: flex;
			padding: 40rpx 4%;
		}
	}

	.top-btn-area {
		display: flex;
		position: absolute;
		top: 20rpx;
		right: 20rpx;

		.code {
			height: 56rpx;
			line-height: 56rpx;
			margin-right: 20rpx;
		}

		.setting-btn {
			width: 56rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			color: #fff;

			image {
				width: 70%;
			}
		}
	}

	.user-area {
		.user-avator {
			width: 120rpx;
			height: 120rpx;
			padding: 5rpx;
			margin-right: 20rpx;
			background: #fff;
			box-shadow: 2rpx 2rpx 5rpx #ccc;
			border-radius: 50%;

			image {
				width: 100%;
				border-radius: 50%;
			}
		}

		.info {
			width: 70%;

			.user-name-bar {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				color: #fff; 

				text {
					font-size: 30rpx;
				}
				.level{
					margin-top: 20rpx;
					image{
						width: 150rpx;
					}
				}
			}

			.sub-info {
				display: flex;
				align-items: center;
			}
			

			.tellphone {
				margin: 0 10rpx 5rpx 0;
				color: #fff;
				font-size: 22rpx;
			}

			.user-lever {
				padding: 0 8rpx;
				border: 2rpx solid #faa6a3;
				background: #faa6a3;
				border-radius: 38rpx;
				font-size: 22rpx;
				color: #fff;
			}
		}
		
		.right-menu{
			position: absolute;
			right:40rpx;
			top:40rpx;
			.menu-btn{
				position: relative;
				width: 50rpx;
				height: 50rpx; 
				.iconfont{
					color:#fff;
				}
			}
			.msg-btn{
				.num{
					position: absolute;
					left:25rpx;
					top:-15rpx;
					min-width: 14rpx;
					text-align: center;
					height: 26rpx;
					line-height: 26rpx;
					padding:0 8rpx;
					background: #fff;
					border-radius: 36rpx;
					color:#666;
					font-size: 18rpx;
				}
				
			}
		}

	}

	.mod-wrap {
		margin: 0 auto 20rpx;
		background: #fff;

		.menu-list {}
	}
	
	.redpack-loading{
		width: 30rpx;
	}
	.menu-list {
		@h: 100rpx;

		.item {
			display: flex;
			align-items: center;
			height: @h;
			padding-left: 20rpx;

			.icon {
				display: flex;
				align-items: center;
				width: 50rpx;
				margin-right: 20rpx;
				flex-shrink: 0;

				image {
					width: 90%;
				}
			}

			.content {
				display: flex;
				justify-content: space-between;
				height: @h;
				line-height: @h;
				padding-right: 10rpx;
				flex-grow: 2;
				border-bottom: 2rpx solid #eee;

				.iconfont {
					color: #999;
				}

				.name {
					flex-grow: 2;
					font-size: 32rpx;
					color: #333;
				}
				.right-icon{
					display: flex;
				}

				.link {
					position: relative;
					font-size: 32rpx;
					color: #333;
					.circle{
						position: absolute;
						right:-20rpx;
						top:20rpx;
						width: 20rpx;
						height: 20rpx;
						background: #f00;
						border-radius: 50%;
					}
				}
			}

		}
	}

	.btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-bottom: 20rpx;
		background: #fff;
		color: #0085FF;
		font-size: 32rpx;
	}
</style>
